/*
@media: Sass 中的 @media 指令和 CSS 的使用规则一样的简单，但它有另外一个功能，可以嵌套在 CSS 规则中。有点类似 JS 的冒泡功能一样，如果在样式中使用 @media 指令，它将冒泡到外面。
*/


.sidebar {
    width: 300px;

    @media screen and (orientation: landscape) {
        width: 500px;
    }
}


// @media 也可以嵌套 @media   @media () and (){}
@media screen {
    .sidebar {
        @media (orientation: landscape) {
            width: 500px;
        }
    }
}

// 在使用 @media 时，还可以使用插件#{}
$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
    .sidebar {
        width: 500px;
    }
}